<script setup lang="ts">
import { ref, toRefs, watch } from 'vue';
import { NavItem } from '@/shared/@types/interface';

const props = defineProps({
  navItems: {
    type: Object,
    default() {
      return {};
    },
  },
  defaultActive: {
    type: String,
    default: '',
  },
});

const { defaultActive } = toRefs(props);
const activeItem = ref(defaultActive.value);

watch(defaultActive, (val) => {
  if (activeItem.value === val) {
    return;
  }
  activeItem.value = val;
});

const emits = defineEmits(['nav-click']);

const handleClick = (item: NavItem) => {
  activeItem.value = item.id;
  emits('nav-click', item);
};
</script>

<template>
  <nav class="o-nav">
    <ul class="o-nav-list">
      <li
        v-for="item in navItems"
        :key="item.id"
        class="o-nav-item"
        :class="[activeItem === item.id ? 'active' : '']"
        @click="handleClick(item)"
      >
        <span>{{ item.label }}</span>
        <template v-if="item.children">
          <div class="sub-menu">
            <ul class="sub-menu-content">
              <li
                v-for="children in item.children"
                :key="children.id"
                class="sub-menu-item"
              >
                {{ children.label }}
              </li>
            </ul>
          </div>
        </template>
      </li>
    </ul>
  </nav>
</template>

<style lang="scss" scoped>
$color: #00685a;
.o-nav {
  height: 100%;
  .o-nav-list {
    height: 100%;
    .o-nav-item {
      position: relative;
      display: inline-flex;
      align-items: center;
      height: 100%;
      padding: 0 26px;
      font-size: 14px;
      line-height: 24px;
      font-family: HarmonyOS_Sans_SC_Medium;
      color: #000;
      cursor: pointer;

      &.active {
        color: $color !important;
      }

      &:hover {
        color: $color;
        .sub-menu {
          display: block;
        }
      }

      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 2px;
        border-radius: 1px;
        transition: all 0.3s ease;
      }

      &:hover::after {
        background: $color;
      }

      .sub-menu {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background-color: #fff;
        display: none;
        &-item {
          line-height: 48px;
          text-align: center;
          font-size: 14px;
          color: #000;
          display: block;
          &:hover {
            background-color: $color;
            color: #fff;
          }
          &.active {
            background-color: $color;
            color: #fff;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 768px) and (max-width: 1440px) {
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 767px) {
}
</style>
